<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer" />
		<title>Ajax异步编程</title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/popper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css">

		span{
			color: red;
			font-weight:bolder;
		}
		img{
			width: 220px;
			height: 315px;
		}
		.media{
			clear: both;
			margin-left:0;
		}
		.mt-0{
			font-size: 14px;
			/* text-align: center; */
		}
	</style>
	<body>
		<div class="div0"><button class="btn1">获取数据</button></div>
		<nav class="navbar navbar-light bg-light">
			<form class="form-inline">
				<input class="form-control mr-sm-2" type="search" placeholder="作品,作者名字" aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button><span>(未实现)</span>
			</form>
		</nav>
		<div class="imgs">

		</div>
		<div class="container mt-3">
			<div class="row">			
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$(".btn1").click(function() {
				$.ajax({
					method: "get",
					url: "https://douban.uieee.com/v2/book/search?q=%E7%A7%91%E5%B9%BB",
					dataType: "jsonp",
					success: function(r) {
						for (var i = 0; i < r.count; i++) {
							var img = r.books[i].images.small;
							var title = r.books[i].subtitle;
							var aver = r.books[i].rating.average;
							var hm =
								`<div class="col-md-4 mt-5">
									<div class="media">
										<img class="mr-3" src="${img}" alt="加载图片失败">
									</div>
									<h5 class="mt-0">${title}<span>&nbsp;&nbsp;&nbsp;&nbsp;评分:${aver}分</span></h5>
								</div>`;
							$(".row").append(hm);
							console.log(r);
						}
					},
				});
				$(".div0").hide();
			});
		});
	</script>
</html>
